<html lang="en">
<head>
<title>huangliusong</title>
<script src="./vue.js"></script>
</head>
 <style type="text/css">
 	.v-enter,
 	.v-leave-to{
 		opacity: 0;
 	}
 	.v-enter-active,
 	.v-leave-active{
 		transition: opacity 1s;
 	}
 </style>
<body>
	<div id="root">
		<fade :show="show">
			<div>transition</div>
		</fade>

		<fade :show="show">
			<h1>你好啊</h1>
		</fade>
		<button @click='handleClick'>添加</button>
	</div>
	
	<script type="text/javascript">
	Vue.component('fade',{
		props:['show'],
		template:'<transition @before-enter="handlBeforeEnter" @enter="handleEnter"><slot v-if="show"></slot></transition>',
		methods:{
			handlBeforeEnter:function(el){
				el.style.color='red'
			},
			handleEnter:function(el,done){
				setTimeout(()=>{
					el.style.color="green"
					done() 
				},2000)
			}
		}
	})
	var vm=new Vue({
		el:"#root",
		data:{
			show:false
		},
		methods:{
			handleClick:function(){
				this.show=!this.show
			}
		}
	})
	</script>
</body>
</html>